<template>
  <div class="left_content1">
    <div class="title">舆情统计(条)</div>
    <div class="progress" v-for="progressData in progressDatas" :key="progressData.id">
      <span>{{ progressData.title }}</span>
      <div class="progress_item">
        <div class="progress_bar" :style="{ width: progressData.current + '%' }"></div>
      </div>
      <div class="progress_data">{{ progressData.count }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
let progressDatas = ref([
  {
    id: 1,
    title: "实时数据",
    current: 60,
    count: 23232,
  },
  {
    id: 2,
    title: "敏感数据",
    current: 90,
    count: 56343,
  },
]);
</script>

<style lang="less" scoped>
.left_content1 {
  .title {
    font-size: 0.1458rem;
    margin: 0.0521rem 0px 0px 0.3125rem;
  }

  .progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.125rem;
    margin-top: 0.2083rem;

    .progress_item {
      width: 2.5rem;
      height: 0.1875rem;
      background-color: #051c48;
    }
  }

  .progress:nth-child(2) .progress_bar {
    background: url("@/assets/images/bar-bg01.png");
    width: 90%;
    height: 100%;
  }

  .progress:nth-child(3) .progress_bar {
    background: url("@/assets/images/bar-bg02.png");
    width: 90%;
    height: 100%;
  }
}
</style>
